<template>
  <div class="exam-container">
    <el-descriptions title="新增题库" direction="vertical" :column="2" border>
      <!-- column为每行2列 如果列中将span设置为2 则何为1列 -->

      <el-descriptions-item label="名称" :width="750">
        <el-input placeholder="在此输入题库名称" v-model="name"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label="难度">
        <el-input-number :min="1" :max="10" style="width: 80%; margin-left: 10%" v-model="num">
        </el-input-number>
      </el-descriptions-item>

      <el-descriptions-item label="标签" :span="2">
        <el-checkbox-group v-model="lables">
          <!-- <el-checkbox v-for="city in cities" :key="city" :label="city">{{ -->
          <el-checkbox label="JAVA" />
          <el-checkbox label="NET" />
          <el-checkbox label="WEB前端" />
          <el-checkbox label="UI设计" />
          <el-checkbox label="TEST" />
        </el-checkbox-group>
      </el-descriptions-item>

      <el-descriptions-item label="描述" :span="2">
        <el-input type="textarea" placeholder="描述" v-model="remark"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label="" :span="2">
        <el-button
          type="primary"
          size="medium"
          @click="addQuestion"
          :disabled="name == '' || lables.length == 0 || num<1 || num=='' "
          >新增</el-button
        >
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { addQuestion } from '../../api/exam'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import type { dataDto } from '@/dto/exam/addQuestion'

export default defineComponent({
  setup() {
    const router = useRouter()
    const data = reactive<dataDto>({
      name: '',
      num: 1,
      lables: [],
      remark: ''
    })

    /**
     * 事件
     */
    const events = {
      /**
       * 添加题库
       */
      addQuestion: () => {
        addQuestion({
          name:data.name,
          labels: data.lables,
          lv: data.num,
          explain: data.remark
        }).then((res: any) => {
          if (res.result == 0) {
            ElMessageBox.confirm('添加成功,请问要继续添加吗?', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                //确定就进这里,不跳页面
              })
              .catch(() => {
                //点击取消就返回题库管理主页面
                router.push('/exam/question')
              })
          }
        })
      }
    }
    /**
     * 事件
     */

    return {
      ...toRefs(data),
      ...events
    }
  }
})
</script>
